<template>
  <div class="tab-1">
    <div class="sign-container">
      <div
        class="circle"
        :style="{ 'background-color': status ? '#409EFF' : '#8fbc8f' }"
        @click="sign"
      >
        {{ status ? "已打卡" : "未打卡" }}
      </div>
      <span>{{
        status ? "打卡不是终点，而是新的起点💪" : "今天你运动了没🫵"
      }}</span>
    </div>
  </div>
</template>

<script>
import { getSignStatus, sign } from "@/api/mobile/sign";
import modifyActivityTime from "@/utils/modify";
import userModule from "@/utils/userInfo";
import { Dialog, Notify, Toast } from "vant";

export default {
  name: "Tab1View",
  props: ["toggle"],
  data() {
    return {
      status: false, // 打卡状态
    };
  },
  watch: {
    // 监听页面切换
    toggle() {
      // 判断是否在运动状态切换的页面
      if (localStorage.getItem("start_sport") === "true") {
        Toast({
          type: "html",
          message: "当前运动正在进行中，请先关闭后再进行跳转，以防数据意外丢失",
        });
        this.$emit("active", 1);
        return;
      }
      this.getSignStatus();
    },
  },
  created() {
    this.getSignStatus();
  },
  methods: {
    // 获取打卡状态
    async getSignStatus() {
      const user = userModule.getUser();
      if (!user || user == {}) {
        Toast("请先登录");
        this.$router.push("/login");
        return;
      }
      const res = await getSignStatus({
        id: user.id,
      });
      this.status = res.data;
      // 子传父
      this.$emit("getSignStatus", res.data);
      // 更新用户活动状态
      modifyActivityTime();
    },
    // 打卡
    async sign() {
      if (this.status) {
        Notify({ type: "success", message: "您已经打卡过了，快去运动吧" });
        return;
      }
      const user = userModule.getUser();
      if (!user) {
        Toast("请先登录");
        this.$router.push("/login");
        return;
      }
      await sign({ id: user.id });
      this.getSignStatus();
      Dialog.confirm({
        message: "打卡成功，是否跳转到运动页面",
      })
        .then(() => {
          this.$emit("changeTab", 1);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes scaleAndJump {
  0%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
}
.tab-1 {
  .sign-container {
    .circle {
      margin: 140px auto 20px;
      bottom: 100;
      width: 80px;
      height: 80px;
      box-shadow: 0 1px 1px 0 #2e8b57;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 80px;
      animation: scaleAndJump 5s infinite;
    }
    span {
      display: block;
      text-align: center;
    }
  }
}
</style>